<template>
  <transition name="slide-fade" ref="refSlideView">
    <el-card id="slide" ref="slide" :style="{ 'z-index': zIndex }"
             :body-style="bodyStyle" class="slide-detail-card-container">
      <template v-slot:default>
        <el-button v-if="showClose" class="close-btn xr-btn--orange"
                   type="primary"
                   icon="el-icon-close"
                   @click="close"/>
        <!--定义了一个插槽-->
        <slot/>
        <el-dialog v-model="dialogVisible"
                   :close-on-click-modal="false"
                   class="no-padding-dialog"
                   title="提示"
                   top="30vh"
                   width="420px">
          <div class="el-message-box__container" style="padding: 10px 15px 15px;">
            <div class="el-message-box__status el-icon-warning"/>
            <div class="el-message-box__message">确定离开？正在编辑的内容将会丢失。</div>
          </div>
          <template v-slot:footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogSure">确 定</el-button></span>
          </template>
        </el-dialog>
      </template>
    </el-card>
  </transition>
</template>

<script setup>
import {getMaxIndex} from '/src/utils/index.js'
import {getCurrentInstance} from "@vue/runtime-core";
import {onBeforeUnmount, onMounted, ref} from "vue";

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

const refSlideView = ref();

defineOptions({
  name: 'SlideView', // 客户管理详情 滑动view
})

const properties = defineProps({
  showClose: {
    type: Boolean,
    default: true
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return {padding: 0}
    }
  },
  appendToBody: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['afterEnter', 'close'])

const zIndex = ref(getMaxIndex())
const dialogVisible = ref(false)




onMounted(() => {
  if (properties.appendToBody) {
    document.body.appendChild(refSlideView.value)
  }

  emits('afterEnter')
})

onBeforeUnmount(() => {
  console.log("onBeforeUnmount")
  dialogVisible.value = false
  if (properties.appendToBody && refSlideView.value && refSlideView.value.parentNode) {
    refSlideView.value.parentNode.removeChild(refSlideView.value)
  }

})

function close() {
  // todo whf 临时的，应该有个提示
  emits('close')
  // dialogVisible.value=true;
}

function dialogSure() {
  dialogVisible.value = false
  emits('close')
}
</script>

<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
}

.el-card {
  overflow: visible;
}

.slide-detail-card-container {
  // position: relative;
  background-color: $xr-backgroud;
}

.close-btn {
  position: absolute;
  top: 160px;
  left: -40px;
  z-index: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 6px;

  :deep( i ) {
    font-size: 26px;
    margin-right: 0;
  }
}
</style>
